Box Model 


Boxes 


Selectors 

* 

All elements 

div 

<div> 

div * 

All elements within <div> 

div span 

<span> within <div> 

div, span 

<div> and <span> 

div > span 

<span> with parent <div> 

div + span 

<span> preceded by <div> 

.class 

Elements of class "class" 

div.class 

<div> of class "class" 

#itemid 

Element with id "itemid" 

div#itemid 

<div> with id "itemid" 

a[attr] 

<a> with attribute "attr" 

a[attr='x'] 

<a> when "attr" is "x" 

a[class~='x'] 

<a> when class is a list 

containing 'x' 

a[lang|='en'] 

<a> when lang begins "en" 

Pseudo-Selectors and Pseudo-Classes 

:fi rst-child 

First child element 

: first-line 

First line of element 

: fi rst-letter 

First letter of element 

:hover 

Element with mouse over 

: active 

Active element 

: focus 

Element with focus 

dink 

Unvisited links 


Margin 



: visited 
:lang(var) 
: before 


Visited links 

Element with language "var" 
Before element 


display 

position 

top 

right 

bottom 

left 

float 


width 

min-width 

max-width 


clear 

z-index 

direction + 

unicode-bidi 

overflow 

clip 

visibility 


min-height 

max-height 

vertical-align 


margin-top 

border-top-color 

margin-right 

border-right-color 

margin-bottom 

border-bottom-color 

margin-left 

border-left-color 

padding x 

border-style x 

padding-top 

border-top-style 

padding-right 

border-right-style 

padding-bottom 

border-bottom-style 

padding-left 

border-left-style 

border x 

border-width x 

border-top x 

border-top-width 

border-bottom x 

border-right-width 

border-right x 

border-bottom-width 

border-left x 

border-left-width 

Tables 

caption-side + 

border-spacing + 

table-layout 

empty-cells + 

border-collapse + 

speak-header + 

Paging 


size 

marks 

page-break-before 

page-break-after 


page-break-inside 4 
page + 
orphans + 
widows + 


:after After element height 

| Interface 

Sizes and Colours 

Color / Background | 

cursor + outline-style 

outline x outline-color 

outline-width 

0 0 requires no unit 

Relative Sizes 

color + background-repeat 

background x background-image 

em lem equal to font size of background-color background-position 

parent (same as 100%) background-attachment 

| Aural 

ex Height of lower case "x" volume + elevation 

% Percentage 

Text 

speak + speech-rate 

Absolute Sizes 


pause x voice-family 


word-spacing + 


pause-before 


pitch 


cm 

Centimeters 

text-align + 

text-transform + 

pause-after 

pitch-range 

mm 

Millimeters 

text-decoration 

white-space + 

cue x 

stress 

in 

Inches 

text-shadow 

line-height + 

cue-before 

richness 


pc 

Colours 

lpc= 12pt 

#789abc 

RGB Hex Notation 


letter-spacing + 


cue-after 
play-during 
azimuth + 


speak-punctuation 

speak-numeral 


#acf 

rgb(0,25,50) 


Equates to "#aaccff" 

Value of each of red, green, 
and blue. 0 to 255, may be 
swapped for percentages. 


Shorthand properties are marked x 
Properties that inherit are marked 4- 


font + x 

font-family + 
font-style + 

font-weight + 

font-stretch + 

font-size + 

1 Miscellaneous 


content 

list-style-type + 

font-variant + 

font-size-adjust + 

quotes + 

list-style-image + 



counter-reset 

list-style-position + 

Available free from 

counter-increment 

marker-offset 


www.AddedBytes.com 








































